<template>
  <Card class="!mt-10px">
    <Button type="primary" :disabled="!categoryStore.category3Id" @click="showAddAttr">
      <template #icon><PlusOutlined /></template>
      添加属性
    </Button>

    <Table
      class="mt-15px"
      :columns="columns"
      :data-source="attrList"
      bordered
      :pagination="false"
      rowKey="id"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, index, text, record }">
        <template v-if="column.dataIndex === 'operator'">
          <Tooltip placement="top">
            <template #title>
              <span>更新</span>
            </template>
            <Button
              class="
                !text-orange-500
                !border-orange-500
                hover:(!text-orange-300
                !border-orange-300)
                mr-10px
              "
              @click="showUpdateAttr(record)"
            >
              <template #icon><EditOutlined /></template>
            </Button>
          </Tooltip>

          <Tooltip placement="top">
            <template #title>
              <span>删除</span>
            </template>
            <Popconfirm
              :title="`您确认要删除 ${record.attrName} 数据吗？`"
              @confirm="removeAttr(record.id)"
            >
              <template #icon><QuestionCircleOutlined style="color: red" /></template>
              <Button danger>
                <template #icon><DeleteOutlined /></template>
              </Button>
            </Popconfirm>
          </Tooltip>
        </template>
        <template v-if="column.dataIndex === 'id'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'attrValueList'">
          <Tag color="blue" v-for="attrValue in text" :key="attrValue.id">
            {{ attrValue.valueName }}
          </Tag>
        </template>
      </template>
    </Table>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'AttrList',
  });
</script>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card, Button, Table, Popconfirm, Tag, Tooltip, message } from 'ant-design-vue';
  import {
    PlusOutlined,
    QuestionCircleOutlined,
    DeleteOutlined,
    EditOutlined,
  } from '@ant-design/icons-vue';
  import { useCategoryStore } from '/@/store/modules/category';
  import { getAttrListApi, removeAttrApi } from '/@/api/product/attr';
  import { AttrListModel, AttrModel } from '/@/api/product/model/attrModel';

  // 声明接受自定义事件
  const emit = defineEmits(['setIsShowAttrList', 'setAttr']);

  const categoryStore = useCategoryStore();

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      width: 80,
      align: 'center',
    },
    {
      title: '属性名',
      dataIndex: 'attrName',
    },
    {
      title: '属性值列表',
      dataIndex: 'attrValueList',
    },
    {
      title: '操作',
      dataIndex: 'operator',
      width: 150,
    },
  ];

  const attrList = ref<AttrListModel>([]);

  const tableLoading = ref(false);

  const getAttrList = async () => {
    const { category1Id, category2Id, category3Id } = categoryStore;

    tableLoading.value = true;

    attrList.value = await getAttrListApi({
      // category1Id是联合类型 undefined | number
      // 而请求参数category1Id类型必须是number
      category1Id: category1Id as number,
      category2Id: category2Id as number,
      category3Id: category3Id as number,
    });

    tableLoading.value = false;
  };

  watch(
    () => categoryStore.category3Id,
    async (category3Id) => {
      if (!category3Id) {
        // 三级分类id没有值
        // 清空数据
        attrList.value = [];
        return;
      }

      getAttrList();
    },
    { immediate: true },
  );

  const showAddAttr = () => {
    // 触发自定义事件
    emit('setIsShowAttrList');
    emit('setAttr', {
      attrName: '',
      attrValueList: [],
    });
  };

  const showUpdateAttr = (record: AttrModel) => {
    emit('setIsShowAttrList');
    emit('setAttr', record);
  };

  // 删除属性
  const removeAttr = async (id: number) => {
    await removeAttrApi(id);
    message.success('删除属性成功');
    getAttrList();
  };
</script>
